<template>
  <div class="flow-track-chart">
    <div ref="drawer" class="flow-track-chart__drawer">
      <workflow-designer
        :style="chartLayoutStyle"
        v-if="chart.activities"
        :lineColor="'#666666'"
        :flowData="chart"
        :flowStatus="flowNodeStatus"
        :workflowStatus="workflowStatus"
        @onActivity="clickActivity"
      />
    </div>
    <div class="flow-track-chart__explain">
      <div class="flow-track-chart__explain-item">
        <i class="flow-track-chart__finish"></i>
        <span>{{ $t('cloudpivot.flow.mobile.FinishNode') }}</span>
      </div>
      <div class="flow-track-chart__explain-item">
        <i class="flow-track-chart__processing"></i>
        <span>{{ $t('cloudpivot.flow.mobile.ProcessNode') }}</span>
      </div>
      <div class="flow-track-chart__explain-item">
        <i class="flow-track-chart__wrong"></i>
        <span>{{ $t('cloudpivot.flow.mobile.WrongNode') }}</span>
      </div>
      <div class="flow-track-chart__explain-item">
        <i class="flow-track-chart__default"></i>
        <span>{{ $t('cloudpivot.flow.pc.UnstartNode') }}</span>
      </div>
    </div>
    <div 
      class="chart-guide" 
      v-if="!hasGuide" 
      @click="hideGuide"
    >
      <div class="guide-content">
        <img src="./images/guide.png"/>
        <p>流程图可手势调整大小</p>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {
  Component, Vue, Prop, Watch
} from 'vue-property-decorator';

import flowDrawer from '@cloudpivot/flow-drawer';
import { setGesture } from './touch-scale';

// import WorkflowDesigner from 'h3-flow-drawer/src/components/index.vue';

@Component({
  name: 'workflow-chart',
  components: {
    WorkflowDesigner: flowDrawer.components.WorkflowDesigner
  }
})
export default class WorkflowChart extends Vue {
  @Prop({ default: () => ({}) }) chart!: any;

  @Prop() workflowStatus?: string;

  @Prop() show!: Boolean;

  initWidth = 0;

  height = 0;

  width = 0;

  hasGuide:any = false;

  viewScale:any = 1; // 初始缩放比例

  maxScale:number = 1.2; // 最大放大比例

  minScale:number = 0.5; // 最大缩小比例

  endScale:number = 1; // 缩放后的比例

  /**
   * 获取流程节点状态
   */
  get flowNodeStatus() {
    const flowStatus: any = [];
    if (this.chart.activityStatus) {
      this.chart.activityStatus.forEach((activity: any) => {
        let status = '';
        switch (activity.status) {
          case 0:
            status = 'finish';
            break;
          case 1:
            status = 'processing';
            break;
          case 2:
            status = 'wrong';
            break;
          default:
            break;
        }
        flowStatus.push({ activityCode: activity.activityCode, status });
      });
    }
    return flowStatus;
  }

  // 图形高度
  get chartLayoutStyle() {
    if (this.chart.activities) {
      this.chart.activities.forEach((activity: any, index: number) => {
        if (index === 0) {
          const wWidth = document && document.documentElement ? document.documentElement.clientWidth : 0;
          this.initWidth = activity.x - (wWidth - activity.width) / 2 + 50;
        }
        const activityPositionY: number = activity.height + activity.y;
        this.height = this.height > activityPositionY ? this.height : activityPositionY;
        const activityPositionX: number = activity.width + activity.x;
        this.width = this.width > activityPositionX ? this.width : activityPositionX;
      });
    }

    return `width:${this.width + 120}px;height:${this.height + 120}px`;
  }

  @Watch('show')
  WatchShow(val: Boolean) {
    if (val) {
      (this.$refs.drawer as HTMLElement).scrollLeft = (this.$refs.drawer as HTMLElement).scrollWidth;
      // 打开流程图时默认流程图全屏展示
      const box:any = document.querySelector(".workflow-designer");
      const boxWrap:any = document.querySelector(".flow-track-chart");
      if(box && boxWrap) {
        const scaleData = Math.min(boxWrap.clientWidth / box.clientWidth, boxWrap.clientHeight / box.clientHeight);
        this.viewScale = scaleData > 1 ? 1: scaleData;
        box.style.transform= `scale(${this.viewScale})`;
        this.maxScale = this.viewScale === 1 ? 1.2 : 1;
        this.minScale = this.viewScale === 1 ? 0.5 : this.viewScale;
        this.endScale = this.viewScale;
      }
    }
  }

  /**
   * 事件回调
   */
  clickActivity(activity: any, e: Event) {
    this.$emit('clickActivity', activity, e);
  }

  /* 
  * 隐藏指引图
  */
  hideGuide() {
    this.hasGuide = true;
    window.localStorage.setItem('chartGuide', 'true');
  }

  mounted() {
    this.hasGuide = window.localStorage.getItem('chartGuide');
    this.callDesigner(); 
  }

  callDesigner() {
    const timer = setTimeout(() => {
      let scale = 1;
      const box:any = document.querySelector(".workflow-designer");
      const boxWrap:any = document.querySelector(".flow-track-chart");
      if(box && boxWrap){
        const boxGesture:any = setGesture(boxWrap);
        boxGesture.gesturestart = (e:any) => {  //双指开始
          scale = this.endScale;
          box.style.transformOrigin = `${e.center.x} ${e.center.y}`;
        };
        boxGesture.gesturemove = (scaleData:any) => {  //双指移动
          let resultScale:number = Math.min(scale*scaleData, this.maxScale);
          resultScale = resultScale <= this.minScale ? this.minScale: resultScale;
          box.style.transform=`scale(${resultScale})`; //改变目标元素的大小和角度
          this.endScale = resultScale;
        };
        boxGesture.gestureend = (e:any) => {  //双指结束
        };
        clearTimeout(timer);
      }else{
        this.callDesigner();
      }
    }, 300);
  }
}
</script>
<style lang="less">
@import "~@cloudpivot/common/styles/mixins.less";

@finish-bg-color: rgba(0, 255, 156, 0.1);
@finish-hover-bg-color: rgba(0, 255, 156, 0.15);
@finish-border-color: rgba(23, 188, 148, 0.5);
@finish-hover-border-color: rgba(50, 182, 131, 1);

@process-bg-color: rgba(41, 112, 255, 0.1);
@process-hover-bg-color: rgba(41, 112, 255, 0.15);
@process-border-color: rgba(41, 112, 255, 0.5);
@process-hover-border-color: rgba(41, 112, 255, 1);

@wrong-bg-color: rgba(244, 69, 78, 0.1);
@wrong-hover-bg-color: rgba(244, 69, 78, 0.15);
@wrong-border-color: rgba(244, 69, 78, 0.5);
@wrong-hover-border-color: rgba(207, 48, 61, 1);

@default-font-color: rgba(0, 0, 0, 0.85);
@default-hover-bg-color: rgba(102, 102, 102, 0.15);
@default-border-color: rgba(153, 153, 153, 1);
@default-hover-border-color: rgba(102, 102, 102, 1);

.flow-track-chart {
  position: relative;
  overflow: hidden;
  height: 100%;
  background-color: #fff;
  &__drawer {
    .px2rem(padding, 10px);
    overflow: auto;
    cursor: move;
    box-sizing: border-box;
    height: 100%;
    .workflow-designer {
      margin: 0;
      min-width: 100%;
      .activity-instance {
        .px2rem(border-radius, 4px);
      }
      .activity-instance {
        border-color: #052535;
        i {
          color: #052535;
        }
      }
      .finish {
        background: @finish-bg-color;
        border-color: @finish-border-color !important;
        i {
          color: @finish-hover-border-color;
        }
      }
      .wrong {
        background: @wrong-bg-color;
        border-color: @wrong-border-color !important;
        i {
          color: @wrong-hover-border-color;
        }
      }
      .processing {
        background: @process-bg-color;
        border-color: @process-border-color !important;
        i {
          color: @process-hover-border-color;
        }
      }
    }
  }

  &__explain {
    position: absolute;
    .px2rem(top, 30px);
    .px2rem(right, 0);
    .px2rem(width, 200px);
    z-index: 10;
  }
  &__explain-item {
    display: flex;
    align-items: center;
    .px2rem(margin-bottom, 16px);
    i {
      flex: 0 0;
      .px2rem(flex-basis, 26px);
      .px2rem(height, 26px);
      .px2rem(border-radius, 4px);
      .px2rem(margin-right, 16px);
    }
    span {
      flex: 1 1;
      text-align: left;
      .px2rem(font-size, 26px);
      color: rgba(0, 0, 0, 0.65);
    }
  }
  &__finish {
    background-color: @finish-bg-color;
    border: 1px solid @finish-border-color !important;
  }
  &__wrong {
    background-color: @wrong-bg-color;
    border: 1px solid @wrong-border-color !important;
  }
  &__processing {
    background-color: @process-bg-color;
    border: 1px solid @process-border-color !important;
  }
  &__default {
    border: 1px solid @default-border-color !important;
  }
}
.chart-guide{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 989;
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
  .guide-content{
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 999;
    .px2rem(margin-left, -140px);
    .px2rem(margin-top, -200px);
    text-align: center;
    img{
      .px2rem(width, 280px);
    }
    p{
      color: rgba(255,255,255,0.85);
      .px2rem(font-size, 28px);
    }
  }
}
</style>
